<template>
  <n-card id="nav-bar">
    <div class="title">综合功能</div>
    <n-space>
      <n-button @click="toHome">
        回到首页
      </n-button>
    </n-space>
  </n-card>

  <div id="three-box">
    <!-- 左侧导航栏 -->
    <div class="nav-box">
      <n-menu
        id="menu"
        :options="menuOptions"
        :render-label="renderMenuLabel"
        :render-icon="renderMenuIcon"
        :expand-icon="expandIcon"
        :on-update:value="changeMenu"
      />
    </div>
    <!-- 主要内容 -->
    <div id="main-canvas-box"></div>
    <!-- 工具栏 -->
    <div class="tool-box">
      <div class="box-title">
        工具栏
      </div>
      <n-form ref="formRef" :label-width="80" :model="ruleForm">
        <n-form-item label="天气" path="season">
          <n-radio-group v-model:value="ruleForm.season" name="radiogroup">
            <n-space>
              <n-radio
                v-for="item in seasonList"
                :key="item.value"
                :value="item.value"
              >
                {{ item.label }}
              </n-radio>
            </n-space>
          </n-radio-group>
        </n-form-item>
        <n-form-item label="角度" path="role">
          <n-radio-group v-model:value="ruleForm.role" name="radiogroup">
            <n-space>
              <n-radio
                v-for="item in roleList"
                :key="item.value"
                :value="item.value"
                @click="changeAngle(item.value)"
              >
                {{ item.label }}
              </n-radio>
            </n-space>
          </n-radio-group>
        </n-form-item>
        <!-- <n-form-item label="角色" path="person">
          <n-radio-group v-model:value="ruleForm.person" name="radiogroup">
            <n-space>
              <n-radio
                v-for="item in peopleList"
                :key="item.value"
                :value="item.value"
                @click="changePerson(item.value)"
              >
                {{ item.label }}
              </n-radio>
            </n-space>
          </n-radio-group>
        </n-form-item> -->
      </n-form>
    </div>
  </div>
</template>

<script>
import { h, onMounted, reactive, toRefs } from "vue";
import { NIcon, NCard, NSpace, NButton } from "naive-ui";
import { useRouter } from "vue-router";
import { BookmarkOutline } from "@vicons/ionicons5";
import {
  mainScene,
  changePersonAngle,
  changePerson
} from "./component/mainScene";

import { island } from "./component/island";

export default {
  components: {
    NCard,
    NSpace,
    NButton
  },

  setup() {
    const router = useRouter();

    const data = {
      // 场景列表
      menuOptions: [
        {
          label: "Toy Story",
          key: "mainScene"
        },
        {
          label: "水中小岛",
          key: "island"
        }
      ],
      //  是否展开菜单
      collapsed: true,
      renderMenuIcon(option) {
        if (option.key === "sheep-man") return true;
        if (option.key === "food") return null;
        return h(NIcon, null, { default: () => h(BookmarkOutline) });
      },
      // 表单
      ruleForm: {
        // role: "third",
        // season: "sunny"
      },
      // 季节
      seasonList: [
        { label: "晴天", value: "sunny" },
        { label: "雨天", value: "rainny" },
        { label: "下雪", value: "snowy" },
        { label: "打雷", value: "thunder" }
      ],
      // 角色列表
      roleList: [
        { label: "第三人称", value: "third" },
        { label: "第一人称", value: "first" }
      ],
      // 人物列表
      peopleList: [
        { label: "梅宝", value: "mabel" },
        { label: "瑶瑶", value: "waddles" }
      ]
    };

    onMounted(() => {});

    const methods = {
      // 回到首页
      toHome() {
        router.push("/home");
      },

      // 切换菜单
      changeMenu(e) {
        console.log(e);
        if (e == "mainScene") {
          mainScene(data);
        }
        if (e == "island") {
          island(data);
        }
      },

      // 切换视角
      changeAngle(e) {
        changePersonAngle(e);
      }
    };

    return {
      ...toRefs(data),
      ...toRefs(methods),
      changePerson
    };
  }
};
</script>

<style lang="scss" scoped>
#nav-bar {
  height: 50px;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 20px;
  color: #fff;
  ::v-deep .n-card__content {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
}
#three-box {
  position: relative;
  // top: 50px;
  // bottom: 0;
  // left: 0;
  // right: 0;
  width: 100%;
  display: flex;
  background: #fff;
  .nav-box {
    position: absolute;
    top: 40px;
    left: 40px;
  }
  #menu {
    height: 100%;
    background: rgba($color: #000000, $alpha: 0.2);
  }
  .tool-box {
    position: absolute;
    top: 40px;
    right: 40px;
    width: 200px;
    padding: 20px;
    background: rgba($color: #000000, $alpha: 0.2);
    .box-title {
      margin-bottom: 10px;
      font-weight: 700;
    }
  }
}
</style>
